// 导入重置样式
require("../../assets/css/reset.css");
// 引入公共样式
require("../../assets/css/basic.css");
// 引入矢量图
require("../../assets/fonts1/iconfont.css");
// 引入当前页面的样式
require("./exercising_course_play.less");

// 引入dom
const dom = require("../../utils/dom.js");
// 引入axios模块
const axios = require("../../utils/axios.js");

window.addEventListener("DOMContentLoaded", function(){
    // 1.需要将储存到本地的数据获取出来
    // 由于存储到本地的数据是字符串，所以获取时我们要转换成对象
    let fragments = JSON.parse(this.localStorage.getItem("fragments"))
    let n = 0;  //定义一个变量来控制当前在哪一节
    let video = dom.get("main video");

    // 2.封装一个函数 用于播放视频
    function play(){
        dom.get("#curPart").textContent = n + 1;
        dom.get("#totalPart").textContent = fragments.length;
        video.src = axios.defaults.baseURL + fragments[n].videoUrl;
        dom.get("main p").textContent = fragments[n].title;
        video.play();
    }
    play();

    // 2.自动播放下一节
    video.addEventListener("ended", function(){
        n++;
        console.log(n) //1,2,3,4
        if(n < fragments.length){
            play();
        }
    })

    // 3.进度条
    // console.dir(video)
    this.setInterval(function(){
        dom.get(".progress").style.width = 100 * video.currentTime/video.duration + "%";
    }, 10);

    // 4.点击按钮实现上一节、下一节
    //上一节
    dom.get(".icon-jiantou-zuozhi").addEventListener("click", function(){
        n--;
        if(n >= 0){
            play();
        }else{
            n = 0;  //n是下标，必须小于等于0
            play();
        }
    });

    //下一节
    dom.get(".icon-jiantou-youzhi").addEventListener("click", function(){
        n++;
        if(n < fragments.length){
            play();
        }else{
            n = fragments.length - 1;  //n是下标，不能超过总视频个数
            play()
        }
    });

    let duration = 0;  //定义一个变量保存运动时间

    //暂停
    dom.get(".icon-zanting").addEventListener("click", function(){
        dom.get(".mask").style.display = "block";
        video.pause();  //点击时暂停播放

        duration += Date.now() - time;  //计算时间=1970年至今的毫秒数-开始播放时的毫秒数
    });

    // 5.点击继续训练继续播放视频
    dom.get(".play").addEventListener("click", function(){
        dom.get(".mask").style.display = "none";
        video.play();  //点击继续训练继续播放视频

        time = Date.now();  //点击继续重新计时
    })

    // 6.点击结束训练结束训练
    let time =  Date.now();  //获取1970年至今的毫秒数
    dom.get(".end").addEventListener("click", function(){
        duration = Math.ceil(duration / 1000);  //毫秒数*1000得到秒然后向上取整
        // 点击时收取运动时长数据
        axios.post("/api/exercise/save",{
            type: 2,
            duration,
            calorie: duration * 0.5,
        }).then(res => {
            if(res.data.errno === 0){
                alert("本次运动时长"+ res.data.data.duration+"   消耗卡路里"+res.data.data.calorie+"J");
                location.href = "exercising_course.html";  //结束训练返回课程训练页面
            }
        })
    })
})